<template>
	<div class='wy-main matching-tendering'>
		<a-row class="wy-main-title" v-if='!datail'>
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">发布物流招标信息</span>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<div class="list_tab">
			<a-form :form="form" @submit="handleSubmit" class="wy-form">
				<a-form-item v-bind="formItemLayout" label="招标编号">
					<a-input :disabled="disabled" v-decorator="[ 'tendNo', { rules: [ {required: true, message: '招标编号不能为空！',}]}]" placeholder='请输入招标编号' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="招标标题">
					<a-input :disabled="disabled" v-decorator="[ 'tendTitle', { rules: [ {required: true, message: '招标标题不能为空！',}]}]" placeholder='请输入招标标题' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="出发地">
					<a-input :disabled="disabled" readOnly style="width:240px;" @click="departureShowMap" v-decorator="[ 'fromCity', {rules: [{ required: true, message: '出发地不能为空!' }]}]" placeholder='请选择出发地' ref="userNameInput">
						<a-icon type="environment" slot="suffix" style="color: #15837A;" />
					</a-input>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="到达地">
					<a-input :disabled="disabled" readOnly style="width:240px;" @click="destinationShowMap" class="wy-input" v-decorator="[ 'toCity', {rules: [{ required: true, message: '到达地不能为空!' }]}]" placeholder='请选择到达地'>
						<a-icon type="environment" slot="suffix" style="color: #FF2F47;" />
					</a-input>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="运输类型">
					<a-select :disabled="disabled" style="width:280px" placeholder='请选择运输类型' v-decorator="[ 'transType', { rules: [ {required: true, message: '运输类型不能为空！',}]}]">
						<a-select-option value="1">
							第三方物流
						</a-select-option>
						<a-select-option value="2">
							运输车辆
						</a-select-option>
						<a-select-option value="3">
							快递公司
						</a-select-option>
						<a-select-option value="4">
							搬家公司
						</a-select-option>
						<a-select-option value="5">
							国际海运
						</a-select-option>
						<a-select-option value="6">
							国际空运
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="招标时间">
					<a-range-picker :disabled="disabled" v-decorator="[ 'tenderingTime', { rules: [ {required: true, message: '招标时间不能为空！',}]}]"  />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="投标时间">
					<a-range-picker :disabled="disabled" v-decorator="[ 'bidTime', { rules: [ {required: true, message: '投标时间不能为空！',}]}]" />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="招标金额">
					<a-input :disabled="disabled" v-decorator="[ 'tendPrice', { rules: [ {required: true, message: '招标金额不能为空！',}]}]" placeholder='请输入招标金额' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="资金来源">
					<a-input :disabled="disabled" v-decorator="[ 'capitalSource', { rules: [ {required: true, message: '资金来源不能为空！',}]}]" placeholder='请输入资金来源' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="联系人">
					<a-input :disabled="disabled" v-decorator="[ 'linkMan', { rules: [ {required: true, message: '联系人不能为空！',}]}]" placeholder='请输入联系人' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="联系方式">
					<a-input :disabled="disabled" v-decorator="[ 'linkMobile', { rules: [ {required: true, message: '联系方式不能为空！',},{ validator: checkMobile }]}]" placeholder='请输入联系方式' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="QQ">
					<a-input :disabled="disabled" v-decorator="[ 'linkQq']" placeholder='请输入QQ' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="邮箱">
					<a-input :disabled="disabled" v-decorator="[ 'linkEmail',{rules: [{ validator: checkMail }]}]"  placeholder='请输入邮箱'/>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="招标说明">
					<a-textarea :disabled="disabled" :autosize="{ minRows: 4, maxRows: 6 }" v-decorator="[ 'tendContent', { rules: [ {required: true, message: '招标说明不能为空！',}]}]"   placeholder='请输入招标说明'/>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="上传附件">
					<a-upload disabled :action="uploadUrl"   v-decorator="[ 'uploadFile']":fileList="fileList" >
						<a-button v-if='datail'>
							<a-icon type="upload" /> 上传
						</a-button>
					</a-upload>
				</a-form-item>
				<a-divider class="title-divider" />
			
				<!-- <div class="ant-row ant-form-item" v-if='datail'>
					<div class="ant-col-4 ant-form-item-label"></div>
					<div class="ant-col-10 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
							<a-button type="primary" :disabled = '!agreement' html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
								立即发布
							</a-button>
						</span>
						</div>
					</div>
				</div> -->
				<div class="ant-row ant-form-item"  v-if='type!="info"'>
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<div class="ant-title">
							<span class="title-span" style="margin-left:-50px; font-size:16px; font-weight:700; ">审核意见</span>
						</div>
					   <div class="ant-radio">
							<a-radio-group v-model="value">
								<!-- v-decorator="['mode']" -->
					    <a-radio :value="107">
					    通过
					    </a-radio>
					    <a-radio :value="108">
					    拒绝
					    </a-radio>
			   	 </a-radio-group>
					 </div>
					 <div class="a-textarea">
						 <a-textarea v-model="approvalRemarks" placeholder="审核意见" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" />
					 </div>
					</div>
				</div>
			</div>
			<div class="ant-row ant-form-item" v-if='type!="info"'>
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							
							<a-button type="primary"  html-type="submit" >
								{{datail.approvalStatus==107?'关闭':'确认'}}
							</a-button>
             
						</span>
					</div>
				</div>
			</div>
			</a-form>
		</div>
		<!--地图Svg显示位置-->
		<map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
	</div>
</template>
<script>
	import MapSvg from '@/components/dialog/MapSvg'
	import { environment } from '@/environments/environment'
	import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
	import moment from 'moment'
	import 'moment/locale/zh-cn';
	moment.locale('zh-cn')
	export default {
		props:['datail'],
		
		data() {
			return {
				uploadUrl: environment.FileUploadUrl + '/fileupload/upload', // 图片上传地址
				agreement:false,
				value:107,
				disabled:true,
				approvalRemarks:'',
				// 地图存起止数据
				departureData: {},
				destinationData: {},
				distance: '',
				type:'',
				fileList: [],
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 20
						},
					},
				},
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {
			if(this.datail){

				let datail = this.datail;
				if(datail.approvalStatus==107){
					this.value = 108;
				}else{
					this.value = 107;
				}
				this.approvalRemarks = datail.approvalRemarks;
				this.environment = environment;
				setTimeout(()=>{
					this.form.setFieldsValue({
						capitalSource:datail.capitalSource,
						fromCity:datail.fromCity,
						linkEmail:datail.linkEmail,
						linkMan:datail.linkMan,
						linkMobile:datail.linkMobile,
						linkQq:datail.linkQq,
						tendContent:datail.tendContent,
						tendNo:datail.tendNo,
						tenderingTime:[moment(datail.signStartTime,'YYYY-MM-DD HH:mm:ss'),moment(datail.signEndTime,'YYYY-MM-DD HH:mm:ss')],
						bidTime:[moment(datail.startTime,'YYYY-MM-DD HH:mm:ss'),moment(datail.endTime,'YYYY-MM-DD HH:mm:ss')],
						tendPrice:datail.tendPrice,
						tendTitle:datail.tendTitle,
						toCity:datail.toCity,
						transType:datail.transType+'',
					});
		        },0)
				if(datail.filePath){
					if(datail.filePath){
					let nameArr = datail.fileName.split(',')
					let pathArr = datail.filePath.split(',')
					for (var i = 0;i<nameArr.length;i++){
						this.fileList.push({
							uid: i,
							name: nameArr[i],
							status:'done',
							url: pathArr[i]
						})
					}
				}
				}
			}
		},
		components: {
			MapSvg
		},
		watch: {},

		mounted: function() {

		},
		methods: {
			// 校验手机号
			checkMobile:checkTel,
			// 校验邮箱
			checkMail:checkEmail,
			
			handleChange(info) {
				console.log(info)
				console.log('上传信息：',this.form.getFieldValue(uploadFile))
				this.fileList = [info.file]
				console.log(this.fileList)
			},
			// 省市地图回调
			mapSvgCall(d) {
				if(d.name === 'departure') {
					this.form.setFieldsValue({
						fromCity: d.provCityArea
					});
					this.departureData = Object.assign({}, d);
					console.log(this.departureData, 898888)
				}
				if(d.name === 'destination') {
					this.form.setFieldsValue({
						toCity: d.provCityArea
					});
					this.destinationData = Object.assign({}, d);
				}
				if(d.name === 'departureStreet') {
					this.form.setFieldsValue({
						departureStreet: d.address
					});
				}
				if(d.name === 'destinationStreet') {
					this.form.setFieldsValue({
						destinationStreet: d.address
					});
				}
				//				this[d.name] = d.address;
				this.getDistanceCount();
			},
			// 选择出发地
			departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
			},
			// 选择到达地
			destinationShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
			},
			// 起运地到目的地的距离
			getDistanceCount() {
				if(this.departureData.point && this.destinationData.point) {
					this.$refs.mapSvgDialog.distanceCount(this.departureData.point, this.destinationData.point);
				}
			},
			// 调用距离返回
			distanceCall(num) {
				console.log(num)
				this.distance = num
				//				 this.form.setFieldsValue({ juliNum: num });
			},
			//认证提交
			handleSubmit(e) {
				 if(this.datail.approvalStatus==107){
          this.$emit('cancel');
          return;
        }
        
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					console.log(values.uploadFile)
					if(!err) {
						this.loading = true;
						if(values.tenderingTime){
							values.startTime  =  values.tenderingTime[0].format('YYYY-MM-DD HH:mm:ss')
							values.endTime    =  values.tenderingTime[1].format('YYYY-MM-DD HH:mm:ss')
						}
						if(values.bidTime){
							values.openTime  =  values.bidTime[0].format('YYYY-MM-DD HH:mm:ss')
							values.stopTime  =  values.bidTime[1].format('YYYY-MM-DD HH:mm:ss')
						}
						if(values.uploadFile){
							values.filePath = values.uploadFile.file.response.data.certifJpgFile
						}
						values.tendId = this.datail.tendId
						values.approvalStatus = this.value;
						values.approvalRemarks = this.approvalRemarks;
							var valued={
								tendId:this.datail.tendId,
								approvalStatus:this.value,
								approvalRemarks:this.approvalRemarks
							};
						console.log('Received values of form: ', values);
						this.$put('info/logisticsTenderee', values,true).then((r) => {
							console.log(r,8989)
							if(r.status == 200){
								this.$notification.success({
								  message: r.data.message,
								});
								this.form.resetFields();
								 this.$emit('cancel');
							}
							this.loading = false;
						}).catch((e) => {
							console.log(e)
							this.loading = false;
						})
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.matching-tendering {
		.list_tab {
			margin-top: 10px;
		}
	}
</style>